<template>
    <PlayGround v-if="$store.state.pk.status === 'playing'">
    </PlayGround>
    <MatchGround v-if="$store.state.pk.status === 'matching'">

    </MatchGround>
    <ResultBoard v-if="$store.state.pk.Loser!=='none'"></ResultBoard>
</template>

<script>
import PlayGround from '@/components/PlayGround.vue'
import { onMounted,onUnmounted } from 'vue';
import { useStore } from 'vuex';
import MatchGround from '@/components/MatchGround.vue'
import ResultBoard from '@/components/ResultBoard.vue'

export default{
    components:{
        PlayGround,
        MatchGround,
        ResultBoard,
    },

    setup() {
        const store = useStore();
        const socketUrl = `wss://app5541.acapp.acwing.com.cn/websocket/${store.state.user.token}`;
        
        store.commit("updateLoser","none");
        store.commit("updateIsRecord",false);

        let socket = null;
        onMounted(() => {

            store.commit("updateOpponent",{
                username:"我的对手",
                photo:"https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png"
            })

            socket = new WebSocket(socketUrl);

            socket.onopen = () =>{//打开时
                store.commit("updateSocket",socket);
                console.log("connected!");
            }


            socket.onmessage = msg =>{//获得信息
                const data = JSON.parse(msg.data);

                if(data.event === "start-matching"){//匹配成功
                    store.commit("updateOpponent",{
                        username: data.opponent_username,
                        photo : data.opponent_photo
                    });
                    store.commit("updateGame",data.game);
                    store.commit("updateBotId",data.bot_id);

                    setTimeout(() => {
                        store.commit("updateStatus","playing");
                    }, 2000);
                } else if(data.event === "move"){
                    const game = store.state.pk.gameObject;
                    const [snake0,snake1] = game.Snake;
                    if(data.a_direction !== undefined)
                    {
                        if(data.a_id == store.state.user.id){
                            if(store.state.pk.botId !== -1){
                                snake0.set_step(data.a_direction);   
                                snake0.update_move_change();
                            }

                        }else{
                            snake1.set_step(data.a_direction);
                            snake1.update_move_change();
                        }

                    }
                    if(data.b_direction !== undefined)
                    {
                        if(data.b_id == store.state.user.id){//自己不用回应服务器的操作（也可以在服务器改成不像自己发送，但那样会导致bot也要重写）
                            if(store.state.pk.botId !== -1){//但是如果是bot是需要回应播发bot效果的。
                                snake0.set_step(data.b_direction);
                                snake0.update_move_change();
                            }

                        }else{
                            snake1.set_step(data.b_direction);
                            snake1.update_move_change();
                        }
                    }
                    

                }else if(data.event === "food"){
                    if(store.state.user.id == store.state.pk.a_id)
                    store.state.pk.gameObject.add_food(data.r,data.c);
                    else
                    store.state.pk.gameObject.add_food(store.state.pk.gameObject.rows-1-data.r,store.state.pk.gameObject.cols-1-data.c);
                }else if(data.event === "over"){
                    store.state.pk.gameObject.game_over(data.id);
                }
                
            }
            socket.onclose = () =>{
                console.log("disconnected!");
            }
        });

        onUnmounted(() =>{
            socket.close();
            store.commit("updateStatus","matching");
        })
    }
}
</script>

<style scoped>
</style>